import { DefaultSliderWrapper } from "@/components";
import { View, ViewProps } from "@tarojs/components";
import { CardBannerProps } from "../basic/DefaultSliderWrapper";
import style from "./index.module.scss";

type RecommendationProps = Omit<
  CardBannerProps,
  "type" | "onSliderItemClick"
> & {
  type?: "course" | "mixed";
} & ViewProps;

const C12Recommendation = ({
  cardData,
  type = "course",
  recommendationTitle,
  className = "",
}: RecommendationProps & { recommendationTitle: string }) => {
  return (
    <View
      className={`${style["recommended"]} ${style["recommended-wrapper"]} ${style[type]} ${style[className]}`}
    >
      <View
        className={`${style["recommended"]} ${style["recommended-title"]} paragraph`}
      >
        {recommendationTitle}
      </View>
      <View className={style["slider-margin-container"]}>
        <DefaultSliderWrapper
          cardData={cardData}
          type="card-banner"
          // The following for corner case short recommendation list
          hideScroller={type === "mixed" && cardData.length <= 2}
        />
      </View>
    </View>
  );
};

export default C12Recommendation;
